<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>逸思精品</title>
	
	<!-- jQuery -->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui -->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all" />
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>

	<!-- 基于laiui的表格 -->
	<script type="text/javascript" src="/static/js/business/tpProductCarefullyChosen/simple_table_choiceshop_allot.js"></script>

	<style>
		body {
			font-family: 微软雅黑;
		}

		.layui-col-md12 {
			width: 100%;
		}

		.layui-form-label {
			width: 130px;
			position: relative;
			float: left;
			display: block;
			padding: 9px 15px;
			font-weight: 400;
			line-height: 20px;
			text-align: right;
		}

		.layui-form input[type=radio] {
			display: block;
		}

		.layui-input-block {
			margin-left: 130px;
		}

		.layui-input-block, .layui-input-inline {
			position: relative;
		}

		.layui-input, .layui-textarea {

		}

		.layui-form-item {
			text-align: center;
			margin-bottom: 5px;
			font-size: 13px;
			height: 30px;
		}

		.header {
			position: fixed;
			top: 0;
			width: 100%;
			background-color: #fff;
			z-index: 999;
		}

		.header .headcon {
			width: 1200px;
			margin: auto;
			display: flex;
			align-items: center;
			color: #1E9FFF;
			padding: 30px 0;
		}

		.headcon .title {
			font-size: 36px;
			font-weight: 700;
		}

		.szbtn {
			background-color: #1E9FFF;
			color: #fff;
			position: absolute;
			font-size: 14px;
			padding: 5px 15px;
			border-radius: 10px;
			position: absolute;
			top: 10;
			right: 20px;
			cursor: pointer;
		}

		.btn-db {
			border: none;
			background-color: #1E9FFF;
			color: #fff;
			font-size: 14px;
			padding: 5px 15px;
			border-radius: 10px;
		}

		.tit {
			font-size: 18px;
		}

		.tit::before {
			content: '●';
			margin-right: 10px;
		}

		.jcinfo {
			font-size: 30px;
			font-weight: 900;
		}

		.item {
			display: flex;
			align-items: center;
			font-size: 16px;
		}

		.item3 {
			display: flex;
			align-items: center;
			font-size: 16px;
		}

		.item3 div {
			width: 33%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.item4 {
			display: flex;
			align-items: center;
		}

		.item4 div {
			width: 25%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.layui-table {
			color: black;
		}

		.layui-table thead th {
			background-color: rgb(0 135 250 / 40%) !important;
			height: 38px
		}

		.layui-table thead tr {
			background-color: rgb(0 135 250 / 40%) !important;
			height: 38px
		}

		.img-border {
			border: solid 1px;
		}

		.img-type::before {
			margin-right: 10px;
		}
	</style>
	<style>
		.footer-view{
			box-sizing: border-box;
			width: 70px;
			text-align: center;
			line-height: 70px;
			/* 关键代码 */
			height:80px;
			/* 底部固定关键代码 */
			position: fixed;
			bottom: 20px;
			right: 0;
			margin-right: 300px;
		}
		.footer{
			border: none;
			border-radius: 15px;
			background-color: #27888F;
			opacity: 0.6;
			color: white;
			cursor: pointer;
			width: 70px;
			height: 70px;
			margin: 0 auto;
			font-weight: 600;
			font-size: 20px;
			box-shadow: #D2D8E0 2px 2px 2px 2px ;
		}
		.eKnowAiBtn{
			opacity: 1;
		}
		
		.num_cart{
			position: absolute;
			margin-left: -5px;
			margin-top: -10px;
			font-size: 12px;
			color: #fff;
			background: #ff0000;
			text-align: center;
			box-shadow: 0 0 0 1px #fff;
			border-radius: 10px;
			padding: 0;
			width: 24px;
			height: 24px;
			line-height: 24px;
			display: inline-block;
		}
	</style>
</head>
<body style="background-color: #f4f4f4 !important;">
<div class="header">
	<div class="headcon">
		<div class="title">逸思精品</div>
	</div>
</div>

<div style="width: 100%;height:130px">
</div>

<div style="margin: 0 auto; max-width: 1140px; background-color: #fff; padding: 30px 0;">
	<div class="layui-row">
		<div class="layui-col-xs3" style="padding-left: 10px;">
			<div style="margin: 10px 0; z-index: 1;">
				<img style="width: 280px; height: 280px; display: inline-block; vertical-align: middle;"
					 th:src="${dto.img}">
				<div style="z-index: 2; position: absolute; left: 10px;; top: 10px;">
					<img th:if="${dto.vtype} eq '新品'" style="width: 40px; height: 40px;" src="/static/img/jingpin/xinpin.png">
					<img th:if="${dto.vtype} eq '爆品'" style="width: 40px; height: 40px;" src="/static/img/jingpin/baopin.png">
				</div>
			</div>
			<div style="border: solid 1px;">
				<video controls autoplay width="100%">
					<source th:src="${dto.linkVideo}" type="video/mp4">
					Sorry, your browser doesn't support embedded videos.
				</video>
			</div>
			<div style="margin: 10px 0;">
				<div th:each="merge: ${dto.mergeArr}">
					<img th:if="${merge.selected}" class="img-type img-border"
						 style="width: 70px; height: 70px; display: inline-block; vertical-align: middle; float:left; cursor: pointer;"
						 th:src="${merge.img}" th:onclick="location.href='[(${merge.link})]'">
					<img th:if="${merge.selected} eq false" class="img-type"
						 style="width: 70px; height: 70px; display: inline-block; vertical-align: middle; float:left; cursor: pointer;"
						 th:src="${merge.img}" th:onclick="location.href='[(${merge.link})]'">
				</div>
			</div>
		</div>
		<div class="layui-col-xs9">
			<div class="szbtn" th:onclick="xxbtn('[(${dto.code})]')">更多信息</div>

			<div style="margin: 0 30px;">
				<div class="jcinfo">
					<div style="margin-bottom: 5px; width: 80%;">
						<span>[[${dto.name}]]</span>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span style="font-size: 24px;">[[${dto.code}]]</span>
					</div>
				</div>
				<div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 5px 0;"></div>
				<div style="text-align: right; font-size: 18px; font-weight: 700; color: #FF5722;">
					历史调拨量：[[${dto.numAllot}]]
				</div>

				<div style="height: 20px;"></div>
				<div class="tit" style="font-weight: 700;">商品价格：</div>
				<div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 5px 0;"></div>
				<div style="height: 10px;"></div>
				<div class="item3">
					<div style="text-align: center;" th:each="price: ${dto.priceArr}">
						<div style="text-align: center; width: 100%; font-size: 36px; font-weight: 700; color: #FF5722;">
							[[${price.percentText}]]
						</div>
						<div style="text-align: center; width: 100%; font-size: 12px; font-weight: 400;">
							[[${price.condText}]]
						</div>
					</div>
				</div>

				<div style="height: 30px;"></div>
				<div class="tit" style="font-weight: 700;">商品信息：</div>
				<div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 10px 0;"></div>
				<div class="item3">
					<div>商品材质：<span>[[${dto.material}]]</span></div>
					<div>商品尺寸(cm)：<span>[[${dto.sizePackage}]]</span></div>
					<div> 商品重量(g)：<span>[[${dto.weightPackage}]]</span></div>
				</div>
				<div class="item3">
					<div> 包装尺寸(cm)：<span>[[${dto.size}]]</span></div>
					<div> 包装重量(g)：<span>[[${dto.weight}]]</span></div>
					<div> <span></span></div>
				</div>
				<div class="item">
					<div>商品竞争优势：<p style="white-space: pre-wrap;">[[${dto.advantage}]]</p></div>
				</div>

				<div style="height: 30px;"></div>
				<div class="tit" style="font-weight: 700;">商品分析：</div>
				<div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 10px 0;"></div>
				
				<div class="item3">
					<div>美国建议售价($)：[[${dto.usa.retailPrice}]]</div>
					<div>预估毛利率(%)：[[${dto.usa.grossMargin}]]</div>
					<div>预估毛利润($)：[[${dto.usa.capitalOutoutRatio}]]</div>
				</div>
				<div class="item3">
					<div>美国最低售价($)：[[${dto.usa.floorPrice}]]</div>
					<div>成本(¥)：[[${dto.usa.cost}]]</div>
					<div>FBA配送费($)：[[${dto.usa.deliveryFee}]]</div>
				</div>
				<div style="height: 20px;"></div>

				<div class="item3">
					<div>英国建议售价(£)：[[${dto.uk.retailPrice}]]</div>
					<div>预估毛利率(%)：[[${dto.uk.grossMargin}]]</div>
					<div>预估毛利润(£)：[[${dto.uk.capitalOutoutRatio}]]</div>
				</div>
				<div class="item3">
					<div>英国最低售价(£)：[[${dto.uk.floorPrice}]]</div>
					<div>成本(¥)：[[${dto.uk.cost}]]</div>
					<div>FBA配送费(£)：[[${dto.uk.deliveryFee}]]</div>
				</div>
				<div style="height: 20px;"></div>

				<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">竞品链接(美国)：<a
						style="text-decoration: underline;" th:href="${dto.linkJPUS}" target="_blank">[[${dto.linkJPUS}]]</a></div>
				<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">竞品链接(英国)：<a
						style="text-decoration: underline;" th:href="${dto.linkJP}" target="_blank">[[${dto.linkJP}]]</a></div>

			</div>
		</div>
	</div>

	<div style="height: 20px;"></div>
	<div style="padding: 10px;">
		<div class="tit" style="font-weight: 700;">调货信息：</div>
		<div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 5px 0;"></div>

		<div style="width:100%;">
			<div id="simple_table_choiceshop_allot">
			</div>
		</div>
		<script th:inline="javascript">
			var tableOfChoiceshopAllot = null;
			//使用layui的sku模块
			layui.use(['form', 'simple_table_choiceshop_allot', 'jquery'], function () {
				var $ = layui.jquery, simple_table_choiceshop_allot = layui.simple_table_choiceshop_allot,
					form = layui.form;

				tableOfChoiceshopAllot = simple_table_choiceshop_allot.init({
					id: 'simple_table_choiceshop_allot',
					data: $.parseJSON(JSON.stringify([[${dto.detailArr}]])),
					prices: $.parseJSON(JSON.stringify([[${dto.prices}]]))
				});
			});
		</script>
	</div>

	<div style="width: 100%; background-color: #FDF5E6;">
		<div>
			<div style="color: #FF5722; width: 60%; float: left; text-align: left; height: 40px; line-height: 40px;">
				<div style="margin-left: 10%;">
					<span>备注：[[${dto.remark}]]</span>
				</div>
				<div style="margin-left: 10%;">
				</div>
			</div>
			<div style="color: #FF5722; float: left; font-weight: 900; width: 35%; text-align: right; display: inline-block; padding: 0 20px; font-size: 18px;">
				总金额(¥)：<span style="font-size: 36px;" id="id_total_price">--</span>&nbsp;&nbsp;&nbsp;<span
					style="font-size: 18px;">(总数量：<span id="id_total_num">--</span>)</span>
			</div>
		</div>
		<div style="width: 95%; text-align: right; padding: 5px 20px;">
			<form class="layui-form" id="formId" method="post">
				<button type="button" class="btn-db" lay-submit lay-filter="formSubmit">加入购物车</button>
			</form>
		</div>
	</div>

	<div style="height: 50px;"></div>
	<div class="item4" style="width: 100%;">
		<div style="text-align: center;" th:each="img: ${dto.imgArr1}">
			<img style="width:280px; height: 280; display: inline-block; vertical-align: middle; float:left;" th:src="${img}">
		</div>
	</div>

	<div class="item4" style="width: 100%;">
		<div style="text-align: center;" th:each="img: ${dto.imgArr2}">
			<img style="width:280px; height: 280; display: inline-block; vertical-align: middle; float:left;"
				 th:src="${img}">
		</div>
	</div>
</div>

<div class="footer-view">
	<div class="footer" id="eKnowAi" onclick="toCart()">
		<img alt="" src="/static/img/jingpin/cart.png" width="80%">
		<span id="id_num_cart" class="layui-badge num_cart">[[${dto.numProductOnCart}]]</span>
	</div>
</div>

<script type="text/html" id="inExchange">
	<div class="layui-col-md12">
		<div class="layui-form-item" style="margin-top: 15px;">
			<div class="layui-inline" style="display: flex;">
				<label class="layui-form-label"><span style="color: red">*</span>调拨公司：</label>
				<div class="layui-input-block" style="margin-left: 0; position: relative;">
					<input type="text" class="layui-input buttontext" style="width: 250px;" name="vGsMc" id="vGsMc" autocomplete="off" readonly lay-verify="required"/>
					<i class="layui-icon layui-icon-more getMore" style="position: absolute;top: 11px;right: 9px;" onclick="getMore('vGsMc',null,'公司名称',null,false, true);" getType="promoteUnit"></i>
				</div>
			</div>
			<div style="color: red;text-align:center;margin-top: 25px; font-size: 16px; padding: 10px;">
				<div style="color: red;text-align:left; margin-left: 80px;">
					<span>特别提醒：<br>1、逸思精品调拨后，不可退回！<br>2、请确认好调拨信息再执行操作！<br>3、该操作一经确定即完成调拨！</span>
				</div>
			</div>
		</div>
	</div>
</script>

<script th:inline="javascript">
	// var prefix = ctx + "hr/choiceshop";
	var extraButton = [[${extraButton}]]

	var gridColumns = null;
	var moduleTable = null;
	var vGsMc = "",
		vGsBm = "",
		vGsJc = "";
</script>

<script type="text/javascript">
	/*
	* 购物车悬浮框鼠标移动效果
	*/
	$("#eKnowAi").mouseover(function() {
		$("#eKnowAi").addClass("eKnowAiBtn");
	});
	$("#eKnowAi").mouseout(function() {$("#eKnowAi").removeClass("eKnowAiBtn");});

	var $, layer, laydate, form, table, wherestr = {};
	layui.use(['table', 'laydate', 'form', 'layer', 'jquery', 'element', 'laypage'], function () {
		$ = layui.$, layer = layui.layer, laydate = layui.laydate , form = layui.form, table = layui.table, element = layui.element, laypage = layui.laypage;
		
		window.xxbtn = function (code) {
			
			$.get("/hr/choiceshop/allotList", {//判断是否存在调拨信息
				'code': code
			}, function (res) {
				console.log("res", res.data.length)
				if (res.data.length > 0) {
					window.open("/business/productcarefullychosen/edit?code=" + code)
				} else {
					return layer.msg('未调拨该商品无法查看')
				}
			});

		}

		$('body').on('click', '.btn-db', function () {
			let choiceShop = tableOfChoiceshopAllot.getData()
			let nums = $('#id_total_num').html() * 1
			if (!nums > 0) {
				$.modal.msgWarning('请选择至少一种商品！');
				return
			}
			
			// 判断数量是否足够调拨
			if(tableOfChoiceshopAllot.isAbleAllot() == false) {
				layer.msg('不能低于最少数量')
				return;
			}
			layer.confirm('确定加入购物车？', function(index){
				layer.close(index);
				
				var indexOfLoading = layer.load(1, {
					shade: [0.5,'#000000'] //0.1透明度的白色背景
				});
				$.post("/api/inter/tpProductCarefullyChosen/addToCart", {
					'choiceShop': JSON.stringify(choiceShop)
				}, function (res) {
					console.log('res---', res);
					layer.closeAll()
					layer.msg(res.msg)
					$('#id_num_cart').html(res.data);
				});
			});
			return;
		})
	});
	
	/*
	* 弹出购物车页面
	*/
	function toCart() {
		layer.open({
			type: 2,
			title: "逸思精品购物车",
			area: ['80%', '80%'],
			content: '/web/business/tpProductCarefullyChosen/toCart'
		});
	}
</script>
</body>
</html>